<template>
  <view class="menu" :style="{ position: scrollTop < topHight ? '' : 'sticky', top: `${0}rpx`, zIndex: 5 }">
    <view v-for="(item, b) in classList" :key="b" @click="togglePopup(b)">
      {{ item.class }}
      <view class="iconfont iconarrow-sortdown-small"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'

const scrollTop = ref(0)
const topHight = ref(0)

const togglePopup = () => {
  const query = uni.createSelectorQuery().in(this)
  query.select('.topBox').boundingClientRect((data) => {
    topHight.value = data.height
    uni.pageScrollTo({
      scrollTop: data.height,
      duration: 200,
    })
  }).exec()
}

onPageScroll((res) => {
  scrollTop.value = res.scrollTop
})
</script>
